<!-- 配置增改弹窗 -->

<style lang="scss" scoped>
.el-form {
  .el-form-item {
    margin: 15px 0;
  }

  .hjd-drawer__footer {
    margin-top: 50px;
  }
}

.el-scrollbar {
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

.config-container {
  height: 100%;

  display: flex;
  flex-direction: column;

  .form {
    flex: 1;
  }

  .buttons {
    padding: 20px;
  }
}
</style>

<template>
  <el-drawer
    :title="`${type === 'create' ? '新增' : '编辑'}配置`"
    :visible.sync="showDialog"
    size="600px"
    :wrapper-closable="true"
    @close="$emit('update:visible', false)"
  >
    <div class="config-container">
      <div class="form">
        <el-form
          ref="dataForm"
          :model="form"
          :rules="rules"
          label-width="100px"
          style="margin-left: 20px; margin-right: 20px"
        >
          <el-form-item label="配置名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>

          <el-form-item label="code" prop="code">
            <el-input v-model="form.code" />
          </el-form-item>

          <el-form-item label="配置简介">
            <el-input
              v-model="form.info"
              type="textarea"
              rows="3"
              resize="none"
            />
          </el-form-item>

          <el-form-item label="配置组">
            <el-select v-model="form.group_id">
              <el-option
                v-for="item in group"
                :key="item.item_id"
                :label="item.item_name"
                :value="item.item_id"
              />
            </el-select>
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-form-item label="是否锁定" prop="lock">
                <el-switch v-model="form.lock" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="是否启用" prop="status">
                <el-switch v-model="form.status" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-table :data="form.item" height="300" border>
            <el-table-column label="item_name">
              <template slot-scope="{ row }">
                <el-input v-model="row.item_name" />
              </template>
            </el-table-column>

            <el-table-column label="item_value">
              <template slot-scope="{ row }">
                <el-input v-model="row.item_value" />
              </template>
            </el-table-column>

            <el-table-column label="info">
              <template slot-scope="{ row }">
                <el-input v-model="row.info" />
              </template>
            </el-table-column>

            <el-table-column label="操作" width="80px">
              <template slot-scope="{ $index }">
                <el-button
                  type="danger"
                  @click="removeItem($index)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="J-flexBC" style="margin-top: 10px">
            <div />
            <el-button type="primary" @click="addItem">添加</el-button>
          </div>

          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="是否锁定" prop="lock">
                <el-switch v-model="form.lock" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="是否启用" prop="status">
                <el-switch v-model="form.status" />
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-form>
      </div>

      <div class="hjd-drawer__footer buttons">
        <el-button @click="showDialog = false"> 取消 </el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import _ from 'lodash'

import { addConfig, editConfig } from '@/api/system/config'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'create'
    },
    data: {
      type: Object,
      default: () => ({})
    },
    currentGroupId: {
      type: [String, Number],
      default: ''
    },
    group: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      showDialog: this.visible,

      defaultItem: {
        item_name: '',
        item_value: '',
        info: ''
      },

      /**
       * 表单内容
       */
      form: {
        name: '',
        code: '',
        info: '',
        group_id: '',
        item: [],
        lock: 0,
        status: 1
      },

      rules: {
        name: [{ required: true, message: '请填写配置名称' }],
        code: [{ required: true, message: '请填写code' }]
      }
    }
  },

  watch: {
    visible() {
      this.showDialog = this.visible

      if (this.visible) {
        if (this.type === 'edit') {
          this.form = _.cloneDeep(this.data)
        } else {
          this.addItem()
          this.form.group_id = _.parseInt(this.currentGroupId)
        }

        // 清除验证
        const clearValidate = _.get(this.$refs, 'dataForm.clearValidate')
        if (_.isFunction(clearValidate)) clearValidate()
      } else {
        // 关闭
        this.form = {
          name: '',
          code: '',
          info: '',
          group_id: '',
          item: [],
          lock: 0,
          status: 1
        }
      }
    }
  },

  methods: {
    addItem() {
      this.form.item.push(_.cloneDeep(this.defaultItem))
    },

    removeItem(index) {
      this.form.item.splice(index, 1)
    },

    submit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 是否是创建
          const isCreate = this.type === 'create'

          // 请求数据
          const queryData = {
            name: this.form.name,
            code: this.form.code,
            info: this.form.info,
            group_id: this.form.group_id,
            item: this.form.item,
            lock: this.form.lock,
            status: this.form.status
          }

          _.forEach(queryData.item, (item) => {
            if (!item.item_value || item.item_value === '') {
              item.item_value = '0'
            }
          })

          // 修改时传 ID
          if (!isCreate) queryData['platform_id'] = this.data.platform_id

          // 请求接口
          const request = isCreate ? addConfig : editConfig
          request(queryData).then(() => {
            this.data.name = this.form.name
            this.data.info = this.form.info
            this.data.code = this.form.code
            this.data.group_id = this.form.group_id
            this.data.item = this.form.item
            this.data.lock = this.form.lock
            this.data.status = this.form.status
            this.showDialog = false
            this.$notify.success(isCreate ? '创建成功' : '修改成功')
            // 刷新列表
            if (isCreate) this.$emit('reload')
          })
        }
      })
    }
  }
}
</script>
